<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="bootstrap-4.6.1-dist/css/bootstrap.min.css"
          rel="stylesheet" type="text/css">
    <link href="css/StudentDoCourse.css"
          rel="stylesheet" type="text/css">
    <style type="text/css">
        .red{
            color: red;
        }
        .black{
            color: black;
        }
        .hide{
            display: none;
        }
        .modal-content{
            margin-top: 50%;
        }
    </style>
</head>
<body>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">修改密码</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <!-- 在编辑和删除时 通过隐藏域完成主键值的存放 -->
                    <input type="hidden" name="loginName" id="editStuLoginName">
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">旧密码:</label>
                        <div class="col-8">
                            <input type="text" name="stuOldPwd" id="stuOldPwd" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">新密码:</label>
                        <div class="col-8">
                            <input type="password" name="stuNewPwd" id="stuNewPwd" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">重复密码:</label>
                        <div class="col-8">
                            <input type="password" name="stuRNewPwd" id="stuRNewPwd" class="form-control">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doUpdate()">确定</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="delModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delModalLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                您确定要删除【<span id="delCName"></span>】吗?
                <form id="delForm">
                    <input type="hidden" name="delCKey" id="delCKey">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doDelete()">确定</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="selectModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" >选课确认</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="selectForm">
                    <!-- 在编辑和删除时 通过隐藏域完成主键值的存放 -->
                    <input type="hidden" name="cKey" id="cKey">
                    <input type="hidden" name="loginName" id="LoginName">
                    确认选择吗？
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doSelect()">确定</button>
            </div>
        </div>
    </div>
</div>


<div id="main">
    <div>
    欢迎【<span id="loginStuName"></span>】登录
    </div>
    <div id="top">
        <form id="searchForm">
            <input type="hidden" name="loginName" id="LogName">
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">课程名:</label>
                <div class="col-8">
                    <input type="text" name="cName" class="form-control"
                           placeholder="支持模糊查询">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">课程号:</label>
                <div class="col-8">
                    <input type="text" name="cKey" class="form-control"
                           placeholder="支持模糊查询">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">任课老师:</label>
                <div class="col-8">
                    <input type="text" name="cTeacher" class="form-control"
                           placeholder="支持模糊查询">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">当前人数:</label>
                <div class="col-8">
                    <input type="text" name="cCurNum" class="form-control"
                          >
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">最大人数:</label>
                <div class="col-8">
                    <input type="text" name="cMaxNum" class="form-control"
                          >
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center"></label>
                <div class="col-2">
                    <button type="button" id="btnSearch" class="btn btn-lg btn-success">查看课程</button>
                </div>
                <label class="col-form-label col-2 text-center"></label>
                <div class="col-2">
                    <button type="button" id="btnSearch_haved" class="btn btn-lg btn-success">查看已选</button>
                </div>
                <label class="col-form-label col-2 text-center"></label>
                <div class="col-2">
                    <button type="button" id="btnUpdatePwd" class="btn btn-lg btn-success">修改密码</button>
                </div>
            </div>
        </form>
    </div>
    <div id="center">
        <table class="table table-bordered table-hover table-striped">
            <thead>
            <tr>
                <td>课程名称</td>
                <td>课程编号</td>
                <td>任课老师</td>
                <td>当前人数</td>
                <td>最大人数</td>
                <td>选课状态</td>
            </tr>
            </thead>
            <tbody id="data">

            </tbody>
        </table>
    </div>
</div>
</body>
<script src="jquery/jquery-3.6.0.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<script>
    let info=sessionStorage.getItem("stu");
    console.log(info);
    if(!info)
    {
        location.href="StudentLogin.html";
    }else{
        let stu=JSON.parse(info);
        jQuery("#loginStuName").html(stu.stuName);
    }
</script>

<script>
    jQuery(function () {
        let stu=JSON.parse(info);
        jQuery("#LogName").val(stu.loginName);
        jQuery("#btnSearch").click(function () {
            search();
        })
    });
    function search() {
        let form=jQuery("#searchForm").serialize();
        console.log(form);
        jQuery.post("course/search",form,function (rst) {
            console.log(rst);
            //在查询是返回的list集合会自动转为数组
            let trs='';
            //js 认为非空即真
            if(rst.length==0)
            {
                trs+=`
                        <tr>
                            <td colspan="8" class="text-center">没有数据</td>
                        </tr>
                    `;
                // console.log(trs);
                jQuery("#data").html(trs);
            }else{
                 let check=new Map();
                jQuery.post("sc/check",form,function (tst) {
                    console.log(tst);
                    console.log(tst.length);
                    for(let i=0;i<tst.length;i++){
                        check[tst[i].cKey]=1;
                    }
                    console.log("check");
                    console.log(check);
                    console.log(check["1001"]);
                    for(let i=0;i<rst.length;i++)
                    {
                        let course=rst[i];
                        console.log(course.cKey);
                        console.log(check[course.cKey]);
                        if(check[course.cKey]!=1)
                        {
                            trs+=`
                           <tr>
                                <td>${course.cName}</td>
                                <td>${course.cKey}</td>
                                <td>${course.cTeacher}</td>
                                <td>${course.cCurNum}</td>
                                <td>${course.cMaxNum}</td>
                                <td>
                                   <a href="#" onclick='showSelectDialog(${JSON.stringify(course)})'>选课</a>
                                </td>
                            </tr>
                        `;
                        }
                        else {
                            trs+=`
                           <tr>
                                <td>${course.cName}</td>
                                <td>${course.cKey}</td>
                                <td>${course.cTeacher}</td>
                                <td>${course.cCurNum}</td>
                                <td>${course.cMaxNum}</td>
                                <td>
                                   <a href="#" onclick='showDelDialog(${JSON.stringify(course)})'>已选择(点击退选)</a>
                                </td>
                            </tr>
                        `;
                        }
                    }
                    console.log(trs);
                    jQuery("#data").html(trs);
                });
            }
        })
    }
</script>
<script>
    jQuery(function () {
        jQuery("#btnUpdatePwd").click(function () {
            console.log("edit show");
            let stu=JSON.parse(info);
            showEditDialog(stu);
        });
    })
</script>
<script>
    function showEditDialog(stu) {
        jQuery("#editModal").modal("show");
        jQuery("#editStuLoginName").val(stu.loginName);
    }
    function doUpdate() {
        jQuery("#editModal").modal("hide");
        let form=jQuery("#editForm").serialize();
        let oldPwd=jQuery("#stuOldPwd").val();
        let newPwd=jQuery("#stuNewPwd").val();
        let newRPwd=jQuery("#stuRNewPwd").val();
        console.log(oldPwd);
        console.log(newPwd);
        console.log(newRPwd);
        if(newPwd==''||newPwd==null||newRPwd==null||
        newRPwd==''||newRPwd!=newPwd||oldPwd==null||oldPwd==''
        ){
            alert("输入为空或两次密码不匹配");
        }else {
            jQuery.post("student/checkPwd",form,function (rst) {
                console.log(rst);
                if(rst.length!=0)
                {
                    console.log(rst);
                    jQuery.post("student/updatePwd",form,function (tst) {
                        console.log(tst);
                      if(tst>0){
                          alert("修改成功");
                      }
                      else {
                          alert("修改失败");
                      }
                    })
                }else{
                    alert("旧密码不正确");
                }
            })
        }
    }
</script>
<script>
    function showSelectDialog(course) {
        if(course.cCurNum==course.cMaxNum){
            alert("课程已满，不可选择");
        }else {
            jQuery("#selectModal").modal("show");
            jQuery("#cKey").val(course.cKey);
            let stu=JSON.parse(info);
            jQuery("#LoginName").val(stu.loginName);
            console.log(course.cKey);
            console.log(stu.loginName);
        }
    }
    function doSelect() {
        jQuery("#selectModal").modal("hide");
       let form  =  jQuery("#selectForm").serialize();
       console.log(form);
       jQuery.post("sc/add",form,function (rst) {
          console.log(rst);
          if(rst>0){
              jQuery.post("course/add_one",form,function (tst) {
                  console.log(tst);
                  if(tst>0){
                      alert("选课成功");
                      search();
                  }
                  else {
                      alert("选课失败");
                      search();
                  }
              })
              //search();
          }
          else {
              alert("选课失败");
          }
      })
    }
</script>

<script>
    function showDelDialog(course)
    {
        jQuery("#delModal").modal("show");
        jQuery("#delCName").html(course.cName);
        jQuery("#delCKey").val(course.cKey);
    }
    function doDelete()
    {
        jQuery("#delModal").modal("hide");
        let form=jQuery("#delForm").serialize();
        jQuery.post("sc/delete",form,function(rst){
            console.log(rst);
            if(rst>0)
            {
                jQuery.post("course/delete_one",form,function (tst) {
                    console.log(tst);
                    if(tst>0){
                        alert("删除成功");
                        search();
                    }
                    else {
                        alert("删除失败");
                        search();
                    }
                })
            }else{
                alert("删除失败!");
            }
        })
    }
</script>
<script>
   jQuery(function () {
       jQuery("#btnSearch_haved").click(function () {
           let form=jQuery("#searchForm").serialize();
           console.log(form);
           jQuery.post("course/have",form,function (rst) {
               console.log(rst);
               let trs='';
               if(rst.length!=0){
                   for(let i=0;i<rst.length;i++)
                   {
                       let course=rst[i];
                       trs+=`
                           <tr>
                                <td>${course.cName}</td>
                                <td>${course.cKey}</td>
                                <td>${course.cTeacher}</td>
                                <td>${course.cCurNum}</td>
                                <td>${course.cMaxNum}</td>
                                <td>
                                   <a href="#" >已选择</a>
                                </td>
                            </tr>
                        `;
                   }
                   jQuery("#data").html(trs);
               }
               else {
                   trs+=`
                        <tr>
                            <td colspan="8" class="text-center">没有数据</td>
                        </tr>
                    `;
                   jQuery("#data").html(trs);
               }
           })
       })
   })
</script>
</html>